<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>粤教云统一认证授权-登录</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <div
                    style="border:0;background-color: rgba(255, 255, 255, 0.4);border-radius: 0.8rem;padding: 1rem;box-shadow:0 2px 12px 0 rgb(168, 167, 167);">
                <div style="text-align: center;">
                    <img class="img-fluid" src="http://www.gjs.cn/Template/Skin/GD/peSkin/images/logo.png" />
                </div>
                <div style="text-align: center;">
                    <h4 class="form-signin-heading" style="text-align: center;margin: 3%">粤教云统一认证授权平台</h4>
                    <h5>
                        <div style="text-align: center;margin-top: 5%;">
                            <div class="btn-group">
                                <button id="smsLoginBtn"  onclick="switchLoginType('sms')" type="button"
                                        class="btn" style="border-color:#e62129">短信验证码登录</button>
                                <button id="passwordLoginBtn" onclick="switchLoginType('password')" type="button"
                                        class="btn" style="border-color:#e62129">账号密码登录</button>
                            </div>
                        </div>
                    </h5>
                    <p style="color: #e62129" th:if="${param.error}" th:text="${session.SPRING_SECURITY_LAST_EXCEPTION?.message}"></p>
                    <form id="smsLoginForm" class="form-signin" method="post" th:action="@{/mobile_login}">
                        <p>
                            <label for="mobile" class="sr-only">Mobile</label>
                            <input type="text" id="mobile" name="mobile" class="form-control" placeholder="手机号"
                                   required="" autofocus="">
                        </p>
                        <p>
                            <label for="smsVerificationCode" class="sr-only">smsVerificationCode</label>
                        <div class="input-group">
                            <input type="text" id="smsVerificationCode" name="smsVerificationCode"
                                   class="form-control" placeholder="验证码" required="" autofocus="">
                            <span class="input-group-btn">
                                    <button id="sendVerificationCode" class="btn btn-lg btn-primary"
                                            style="background-color: #e62129;font-size: 1rem;border: 2px solid #e62129;">获取验证码</button>
                                </span>
                        </div>
                        </p>
                        <p>
                            <button class="btn btn-lg btn-primary btn-block"
                                    style="background-color: #e62129;border: 0;" type="submit">登录</button>
                        </p>
                        <p>
                            <label class="form-check-label">
                                <input type="checkbox" class="form-check-input" required
                                       style="width: 1rem;height: 1rem;" value="">同意<a href="#" target="_blank" onclick="toAgreement('UserAuthorizationAgreement')">《粤教云用户统一授权协议》</a>
                            </label>
                        </p>
                    </form>
                    <form id="passwordLoginForm" class="form-signin" method="post" th:action="@{/login}"
                          style="display: none;">
                        <p>
                            <label for="username" class="sr-only">Username</label>
                            <input type="text" id="username" name="username" class="form-control" placeholder="账号"
                                   required="" autofocus="">
                        </p>
                        <p>
                            <label for="password" class="sr-only">Password</label>
                            <input type="password" id="password" name="password" class="form-control"
                                   placeholder="密码" required="">
                        </p>
                        <p>
                            <label for="imgValidCode" class="sr-only">imgValidCode</label>
                        <div class="input-group" style="max-height: min-content;">
                            <input style="width: 80%;" type="text" id="imgValidCode" name="imgValidCode"
                                   class="form-control" placeholder="验证码" required="" autofocus="">
                            <span class="input-group-btn">
                                <img id="validCodeImg" class="img-fluid" style="max-height: 3rem;padding-left: 0.25rem;" th:src="@{/image_validate_code}" th:onclick="$('#validCodeImg').attr('src',[[@{/image_validate_code}]]+'?t='+Math.random())"/>
                            </span>
                        </div>
                        </p>
                        <p>
                            <button class="btn btn-lg btn-primary btn-block"
                                    style="background-color: #e62129;border: 0;" type="submit">登录</button>
                        </p>
                        <p>
                            <label class="form-check-label">
                                <input type="checkbox" class="form-check-input" required
                                       style="width: 1rem;height: 1rem;" value="">同意<a href="#" target="_blank" onclick="toAgreement('UserAuthorizationAgreement')">《粤教云用户统一授权协议》</a>
                            </label>
                        </p>
                    </form>
                    <p>没有账号？<a th:href="@{/register}">去注册</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    // 默认短信验证码登录
    switchLoginType();

    function switchLoginType(type) {
        if(!type){
            type = getUrlParam('type') || 'sms'
        }
        // 清空表单
        $(":input",'#' + type + 'LoginForm').not(":button",":reset","hidden","submit").val("")
        // 渲染切换按钮样式
        $('.btn-group button').css({"background-color":"#fff","color":"black"});
        $('#' + type + 'LoginBtn').css({"background-color":"#e62129","color":"#fff"});
        // 表单显隐
        $('.form-signin').hide()
        $('#' + type + 'LoginForm').show()
    }

    var timer = null;
    var timeCount = 0;
    var sendVerificationCode = $("#sendVerificationCode")
    sendVerificationCode.click(function () {
        var mobile = $("#mobile").val();
        if (!mobile) {
            alert("无效手机号")
            return
        }

        // 点击发送按钮后要马上禁用按钮防止重放
        sendVerificationCode.attr("disabled", "true");
        $.get("[[@{/send_login_valid_code}]]?mobile=" + mobile, function (res) {
            if (res.code && res.code === 1) {
                // 成功
                timeCount = 60
                timer = setInterval(function () {
                    timeCount--;
                    if (timeCount === 0) {
                        sendVerificationCode.text("获取验证码")
                        sendVerificationCode.removeAttr("disabled");
                        clearInterval(timer)
                        return
                    }
                    sendVerificationCode.text(timeCount + "秒后可重发")
                    sendVerificationCode.attr("disabled", "true");
                }, 1000);
            } else {
                sendVerificationCode.removeAttr("disabled");
                // 失败
                alert('发送验证码失败：' + (res.msg || '未知原因'))
            }
        });
    });

    function loginHandler(type){
        var loginData = {}
        if(type === "sms"){
            loginData.mobile = $('#mobile').val()
            loginData.smsVerificationCode = $('#smsVerificationCode').val()
        }else{
            loginData.username = $('#username').val()
            loginData.password = $('#password').val()
        }

        $.post(type === "sms" ? "/mobile_login" : "/login",loginData, function (res) {
            if (res.code && res.code === 1) {
                // 成功
                console.log(res)
            } else {
                // 失败
                alert('登录失败：' + (res.msg || '未知原因'))
            }
        });
    }

    function toAgreement(agreementConfigKey){
        window.location.href = 'http://www.baidu.com'+"?key="+agreementConfigKey
    }

    //获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }
</script>
<style>
    /* stylelint-disable selector-no-qualifying-type, property-no-vendor-prefix */

    body {
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #eee;
    }

    .form-signin {
        max-width: 330px;
        padding: 15px;
        margin: 0 auto;
    }
    .form-signin .form-signin-heading,
    .form-signin .checkbox {
        margin-bottom: 10px;
    }
    .form-signin .checkbox {
        font-weight: 400;
    }
    .form-signin .form-control {
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        height: auto;
        padding: 10px;
        font-size: 16px;
        line-height: 1.3;
    }
    .form-signin .form-control:focus {
        z-index: 2;
    }
    .form-signin input[type="email"] {
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
    .form-signin input[type="password"] {
        margin-bottom: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
</style>
</html>